<template>
  <div class="container_swiper">
    <!-- <div class="equityPopup" :class="show&&'equityPopup-show'"> -->
    <div class="equityPopup show equityPopup-show"
         v-if="ishow">
      <div class="closeBtn"
           @click="closebtn()">×</div>
      <div class="carouselbox">
        <swiper class="banner-swiper"
                previous-margin="30px"
                next-margin="30px"
                :current="cuttent"
                @change="change">
          <!-- 样式1 -->
          <swiper-item class="banner-item">
            <div class="swiperbox"
                 :style="{'height':boxheight+'px'}"
                 :class="current !== 0?'banner-scale':''">
              <div class="box1">
                <div class="box1_top">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/top1.png"
                       alt
                       class="img" />
                </div>
                <div class="mid">
                  <img :src="mallList.headimgurl"
                       alt
                       class="headimg"
                       v-if="mallList.headimgurl" />
                  <p class="nick midtext">{{mallList.user_name}}</p>
                  <p class="desc midtext">“这个宝贝太值得了，强烈推荐”</p>
                  <img :src="ImgBaseUrl+bannerImg[0]"
                       alt
                       class="mainimg"
                       v-if="ImgBaseUrl && bannerImg[0]" />
                </div>

                <p class="price">
                  <span class="icon">￥</span>
                  {{mallList.sale_price}}
                </p>
                <p class="title">{{mallList.name}}</p>
                <img :src="codeimg"
                     alt
                     class="code"
                     v-if="codeimg" />
                <p class="tip">长按识别立享优惠</p>
                <div class="zhanwei1"></div>
              </div>
            </div>
          </swiper-item>
          <!-- 样式2 -->
          <swiper-item class="banner-item">
            <div class="swiperbox"
                 :style="{'height':boxheight+'px'}"
                 :class="current !== 1?'banner-scale':''">
              <div class="box1">
                <div class="box1_top">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/top1.png"
                       alt
                       class="img" />
                </div>
                <div class="mid">
                  <img :src="mallList.headimgurl"
                       alt
                       class="headimg"
                       v-if="mallList.headimgurl" />
                  <p class="nick midtext">{{mallList.user_name}}</p>
                  <p class="desc midtext">“这个宝贝太值得了，强烈推荐”</p>
                  <!-- <img :src="content" alt class="mainimg mainimg2" mode="widthFix" /> -->
                  <img :src="val"
                       alt
                       class="mainimg mainimg2"
                       mode="widthFix"
                       v-for="(val,index) in goods_data2"
                       :key="index" />
                </div>

                <p class="price">
                  <span class="icon">￥</span>
                  {{mallList.sale_price}}
                </p>
                <p class="title">{{mallList.name}}</p>
                <img :src="codeimg"
                     alt
                     class="code"
                     v-if="codeimg" />
                <p class="tip">长按识别立享优惠</p>
                <div class="zhanwei1"></div>
              </div>
            </div>
          </swiper-item>

          <!-- 样式3 -->
          <swiper-item class="banner-item">
            <div class="swiperbox"
                 :style="{'height':boxheight+'px'}"
                 :class="current !== 2?'banner-scale':''">
              <!-- <div class="mask" :class="current !== 2?'ismask':''"></div> -->

              <div class="box3">
                <div class="top3">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/top3.png"
                       alt
                       class="img" />
                </div>
                <div class="mid3">
                  <img :src="mallList.headimgurl"
                       alt
                       class="headimg3"
                       v-if="mallList.headimgurl" />
                  <p class="nick midtext">{{mallList.user_name}}</p>
                  <p class="desc midtext">“这个宝贝太值得了，强烈推荐”</p>
                  <div class="mainimg3">
                    <img :src="ImgBaseUrl+bannerImg[0]"
                         alt
                         class="img" />
                  </div>

                  <p class="title3">{{mallList.name}}</p>
                  <p class="price3">
                    <span class="icon">￥</span>
                    {{mallList.sale_price}}
                  </p>
                </div>
                <!-- <div class="bottom"> -->
                <div class="zhanwei">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/bottom3.png"
                       alt
                       class="bottomImg" />
                </div>
                <!-- </div> -->
                <img :src="codeimg"
                     alt
                     class="code3"
                     v-if="codeimg" />
                <p class="tip3">长按识别立享优惠</p>
              </div>
            </div>
          </swiper-item>

          <!-- 样式4 -->
          <swiper-item class="banner-item">
            <div class="swiperbox"
                 :style="{'height':boxheight+'px'}"
                 :class="current !== 3?'banner-scale':''">
              <div class="box3">
                <div class="top3">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/top3.png"
                       alt
                       class="img" />
                </div>
                <div class="mid3">
                  <img :src="mallList.headimgurl"
                       alt
                       class="headimg3"
                       v-if="mallList.headimgurl" />
                  <p class="nick midtext">{{mallList.user_name}}</p>
                  <p class="desc midtext">“这个宝贝太值得了，强烈推荐”</p>
                  <div class="mainimg3">
                    <img :src="val"
                         alt
                         class="img"
                         mode="widthFix"
                         v-for="(val,index) in goods_data2"
                         :key="index" />
                  </div>

                  <p class="title3">{{mallList.name}}</p>
                  <p class="price3">
                    <span class="icon">￥</span>
                    {{mallList.sale_price}}
                  </p>
                </div>
                <!-- <div class="bottom"> -->
                <div class="zhanwei">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/bottom3.png"
                       alt
                       class="bottomImg" />
                </div>
                <!-- </div> -->
                <img :src="codeimg"
                     alt
                     class="code3"
                     v-if="codeimg" />
                <p class="tip3">长按识别立享优惠</p>
              </div>
            </div>
          </swiper-item>

          <!-- 样式5 -->
          <swiper-item class="banner-item">
            <div class="swiperbox"
                 :style="{'height':boxheight+'px'}"
                 :class="current !== 4?'banner-scale':''">

              <div class="box5">
                <img :src="ImgBaseUrl+bannerImg[0]"
                     alt
                     class="headimg" />
                <p class="price5">
                  <span class="icon">￥</span>
                  {{mallList.sale_price}}
                </p>
                <p class="title5">{{mallList.name}}</p>

                <div class="mid">
                  <div class="info">
                    <img :src="mallList.headimgurl"
                         alt
                         class="img"
                         v-if="mallList.headimgurl" />
                    <p class="nick midtext mintext1">{{mallList.user_name}}</p>
                    <p class="desc midtext mintext1">“这个宝贝太值得了，强烈推荐”</p>
                  </div>

                  <img :src="codeimg"
                       alt
                       class="code5"
                       v-if="codeimg" />
                  <p class="tip5">长按识别立享优惠</p>
                </div>
                <div class="bottom5">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/bottom5.png"
                       alt
                       class="img" />
                </div>
              </div>
            </div>
          </swiper-item>

          <!-- 样式6 -->
          <swiper-item class="banner-item">
            <div class="swiperbox"
                 :style="{'height':boxheight+'px'}"
                 :class="current !== 5?'banner-scale':''">

              <div class="box5">
                <img :src="val"
                     alt
                     class="headimg"
                     mode="widthFix"
                     v-for="(val,index) in goods_data2"
                     :key="index" />
                <p class="price5">
                  <span class="icon">￥</span>
                  {{mallList.sale_price}}
                </p>
                <p class="title5">{{mallList.name}}</p>

                <div class="mid">
                  <div class="info">
                    <img :src="mallList.headimgurl"
                         alt
                         class="img"
                         v-if="mallList.headimgurl" />
                    <p class="nick midtext mintext1">{{mallList.user_name}}</p>
                    <p class="desc midtext mintext1">“这个宝贝太值得了，强烈推荐”</p>
                  </div>

                  <img :src="codeimg"
                       alt
                       class="code5"
                       v-if="codeimg" />
                  <p class="tip5">长按识别立享优惠</p>
                </div>
                <div class="bottom5">
                  <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/bottom5.png"
                       alt
                       class="img" />
                </div>
              </div>
            </div>
          </swiper-item>

        </swiper>
      </div>
      <ul class="indicatorUl">
        <li class="indicatorLi"
            v-for="(val,index) in 6"
            :key="index"
            :class="current == index?'active':''"></li>
      </ul>
      <div class="btnbox">
        <div class="saveBtn"
             @click="saveImg">
          <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/save.png"
               alt
               class="saveImg" />
          <p class="text">保存此图片</p>
        </div>
        <div class="wechatBtn">
          <button open-type="share"
                  class="sharebtn"></button>
          <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/wechat.png"
               alt
               class="wechatImg" />
          <p class="text">微信</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      ImgBaseUrl: common.image_response, //img 域名
      imgUrl: common.image_response,
      current: 0,
      mallList: "",
      ishow: false,
      shopid: -1,
      bannerImg: [],
      content: "",
      codeimg: "",
      posters: "",
      sid: "",
      boxheight: 0,
      img: "",
      goods_data2: [],
      arr: []

      // indicatorDots: true
    };
  },
  onLoad: function (options) {
    this.boxheight = wx.getSystemInfoSync().windowHeight * 0.66;

    // console.log(this.boxheight);
    this.sid = wx.getStorageSync("user_id");
    this.bannerImg = [];
    this.content = "";
    this.current = 0
    this.goods_data2 = [];
    this.getData(this.shopid);
    this.get_code();
  },
  methods: {
    change (e) {
      this.current = e.mp.detail.current;
      // console.log(this.current);
    },
    closebtn () {
      this.ishow = false;
      this.$emit("getSwiperMsg", false);
    },
    getData (e) {
      common.mmk_Loading(0);
      let obj, commentObj;
      if (wx.getStorageSync("user_id")) {
        //登录
        obj = {
          id: e,
          user_id: wx.getStorageSync("user_id")
        };
        commentObj = {
          project_id: e,
          user_id: wx.getStorageSync("user_id")
        };
      } else {
        //未登录
        obj = {
          id: e,
          user_id: 0
        };
        commentObj = {
          project_id: e,
          user_id: 0
        };
      }
      //商城项目详情
      setTimeout(() => {
        common.fly_post("api/v4_5/shop_project/show", obj, msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.target = "banner";
            var reg = /http:\/\/.*?(png|jpg)/gi;
            this.content = res.data.content.match(reg);
            this.goods_data2 = res.data.content.match(reg);
            this.mallList = res.data;
            this.shoplist = res.data;
            // res.data.content =  res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');

            if (res.data.banner !== null && res.data.banner !== "") {
              this.bannerImg = res.data.banner.split(",");
              // console.log(this.bannerImg);
            }
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 1500,
              mask: true,
              success () {
                setTimeout(() => {
                  wx.switchTab({ url: "/pages/index/main" });
                }, 1500);
              }
            });
            return false;
          }
        });
      }, 100);
    },
    get_code () {
      //二维码
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/member/share_qrcode",
        {
          type: 2,
          item_id: this.shopid,
          user_id: wx.getStorageSync("user_id") || 0
        },
        response => {
          wx.hideLoading();
          let res = response.data;
          if (res.status_code == 0) {
            this.codeimg = res.data.qrcode;
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    getImg (type, shopid, mode, src, mark) {
      // console.log(src + "---403");
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/image/share_qrcode",
        {
          type: type, // type 2项目 3商品 26服务 27会员卡详情
          item_id: shopid, //项目id  或者商品id
          user_id: wx.getStorageSync("user_id") || 0,
          model: mode, //样式 123456
          src: src //二维码链接
        },
        response => {
          wx.hideLoading();
          let res = response.data;
          if (res.status_code == 0) {
            this.posters = res.data.qrcode;
            common.save_poster(this.posters);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    saveImg () {
      if (this.current == 0 || this.current == 2 || this.current == 4) {
        this.img = this.ImgBaseUrl + this.bannerImg[0];
      } else {
        this.img = "";
      }
      this.getImg(2, this.shopid, this.current + 1, this.img);
    }
  },
  onShareAppMessage () {
    return {
      title: this.mallList.name,
      path:
        "/pages/package_main/entry/main?tg=" +
        this.shopid +
        "&t=3&sid=" +
        this.sid,
      // path: "/pages/package_projects/project_detail/main?id=" + this.mallId,
      imageUrl: `${this.ImgBaseUrl}${this.bannerImg[0]}`,
      from: "button",
      success: res => {
        wx.showToast({
          title: "分享成功",
          icon: "success",
          duration: 2000,
          mask: false
        });
      },
      fail: () => {
        wx.showToast({
          title: "分享失败",
          icon: "fail",
          duration: 2000,
          mask: false
        });
      },
      complete () {
        wx.showToast({
          title: "分享完成", //提示的内容,
          icon: "success", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
      }
    };
  },
  watch: {
    shopid (newval, oldval) {
      console.log(newval + "----508");
      console.log(oldval + "----509");
      this.shopid = newval;
      this.getData(this.shopid);
      // console.log(this.shopid );
    },
    ispop (newval, oldval) {
      this.ishow = newval;
      if (this.ishow == false) {
        this.current = 0;
      }
    }
  },
  props: {
    shopid: "",
    ispop: ""
  }
};
</script>


<style lang="less" scoped>
.container_swiper {
  background: #fff;
  height: auto;

  // 权益弹窗
  .equityPopup {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99996;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;

    .closeBtn {
      width: 26px;
      height: 26px;
      font-size: 14px;
      border-radius: 50%;
      color: #fff;
      background: rgba(0, 0, 0, 0.64);
      line-height: 22px;
      text-align: center;
      position: absolute;
      top: 4%;
      right: 5.8%;
    }
    .btnbox {
      width: 100%;
      display: flex;
      margin-top: 20px;
      padding-left: 25.93%;
      position: absolute;
      bottom: 5.3%;
      .text {
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
      }
      .saveBtn,
      .wechatBtn {
        width: 60px;
        text-align: center;
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
        position: relative;
        .sharebtn {
          width: 100%;
          height: 100%;
          position: absolute;
          background: transparent;
          top: 0;
          left: 0;
        }
        .saveImg,
        .wechatImg {
          width: 50px;
          height: 50px;
        }
      }
      .saveBtn {
        margin-right: 69px;
      }
    }
    .indicatorUl {
      width: 100px;
      height: 5px;
      position: absolute;
      bottom: 22%;
      text-align: center;
      left: 36%;
      // background: #39a9ed;
      margin: 10px auto 0;
      .indicatorLi {
        width: 5px;
        height: 5px;
        background: rgba(183, 183, 183, 1);
        // float: left;
        border-radius: 50%;
        margin-right: 8px;
        display: inline-block;
        &.active {
          width: 18px;
          height: 5px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
        }
      }
    }
    .carouselbox {
      width: 100%;
      height: 66%;
      position: absolute;
      top: 10%;
      left: 0;
      // transform: translateY(-50%);
      .banner-swiper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 5px;
        .banner-item {
          width: 80%;
          padding: 0 8px;
          box-sizing: border-box;
          border-radius: 5px;
          position: relative;
          .swiperbox {
            width: 100%;
            border-radius: 5px;
            overflow: scroll;
            // overflow: hidden;
            transition: all 0.1s linear;
            position: relative;
            .box1 {
              width: 100%;
              background: #fff;
              height: auto;
              position: relative;
              // padding-bottom: 41px;
              box-sizing: border-box;
              border-radius: 5px;
              overflow: hidden;
              .box1_top {
                height: 64px;
                overflow: hidden;
                .img {
                  width: 100%;
                  height: 64px !important;
                }
              }
              .mid {
                box-sizing: border-box;
                padding-top: 30px;
                position: relative;
                text-align: center;
                .headimg {
                  width: 35px !important;
                  height: 35px !important;
                  position: absolute;
                  left: 20.8%;
                  top: 26px;
                  border-radius: 50% !important;
                }
                .midtext {
                  padding-left: 34.89%;
                  font-size: 9px;
                  text-align: left;
                  &.nick {
                    color: #666;
                    margin-bottom: 2px;
                  }
                  &.desc {
                    color: #333;
                    margin-bottom: 22px;
                  }
                }
                .img {
                  width: 35px;
                  height: 35px;
                  position: absolute;
                  padding-left: 34.89%;
                }

                .mainimg {
                  width: 271px;
                  height: 271px;
                  border-radius: 7px 7px 5px 5px;
                  &.mainimg2 {
                    width: 88.92%;
                    height: auto;
                  }
                }
              }
              .price {
                height: 18px;
                padding-left: 15px;
                font-weight: 500;
                color: rgba(255, 36, 104, 1);
                font-size: 18px;
                margin-top: 8px;
                margin-bottom: 12px;
                .icon {
                  font-size: 13px;
                }
              }
              .title {
                width: 63%;
                margin-left: 15px;
                font-size: 14px;
                color: rgba(51, 51, 51, 1);
                line-height: 20px;
                height: 40px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .code {
                width: 65px !important;
                height: 65px !important;
                position: absolute;
                right: 15px;
                bottom: 46px;
                &.code3 {
                  transform: translate(-50%, -50%);
                  left: 50%;
                  bottom: 1px;
                }
              }
              .tip {
                color: #999990;
                font-size: 8px;
                position: absolute;
                bottom: 30px;
                right: 15px;
              }
              .zhanwei1 {
                height: 41px;
              }
            }
            .box3 {
              width: 100%;
              box-sizing: border-box;
              position: relative;
              background: #fff;
              .top3 {
                height: 55px;
                width: 100%;
                padding-top: 15px;
                text-align: center;
                .img {
                  width: 40.6%;
                  height: 25px;
                }
              }
              .mid3 {
                width: 89.26%;
                height: auto;
                background: rgba(255, 247, 249, 1);
                border-radius: 5px;
                border: 1px solid rgba(255, 206, 220, 1);
                border-bottom: none;
                position: relative;
                margin: 0 auto;
                .nick {
                  font-size: 9px;
                  color: rgba(102, 102, 102, 1);
                  margin-top: 12px;
                }
                .desc {
                  font-size: 9px;
                  color: rgba(51, 51, 51, 1);
                  margin-top: 2px;
                  margin-bottom: 12px;
                }
                .midtext {
                  padding-left: 34.21%;
                  box-sizing: border-box;
                }
                .headimg3 {
                  width: 35px;
                  height: 35px;
                  position: absolute;
                  left: 18.4%;
                  top: 6px;
                  border-radius: 50%;
                }
                .mainimg3 {
                  width: 100%;
                  text-align: center;
                  .img {
                    width: 251px;
                    height: 251px;
                    border-radius: 7px 7px 5px 5px;
                  }
                }
                .title3 {
                  box-sizing: border-box;
                  padding: 0 15px;
                  font-size: 14px;
                  color: rgba(51, 51, 51, 1);
                  line-height: 20px;
                  height: 40px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  text-align: center;
                }
                .price3 {
                  font-size: 18px;
                  color: rgba(255, 36, 104, 1);
                  text-align: center;
                  .icon {
                    font-size: 13px;
                  }
                }
              }
              .zhanwei {
                width: 100%;
                height: 109px;
                .bottomImg {
                  height: 109px;
                  width: 100%;
                }
              }
              .code3 {
                width: 65px;
                height: 65px;
                position: absolute;
                bottom: 31px;
                left: 39.93%;
              }
              .tip3 {
                font-size: 8px;
                color: rgba(255, 255, 255, 1);
                position: absolute;
                bottom: 15px;
                left: 39.93%;
              }
            }
            .box5 {
              border-radius: 0;
              overflow: hidden;
              padding-bottom: 0;
              background: #fff;
              position: relative;
              .headimg {
                width: 100%;
                height: 298px;
              }
              .price5 {
                font-size: 18px;
                color: rgba(255, 36, 104, 1);
                padding-left: 15px;
                box-sizing: border-box;
                margin: 10px 0 8px;
                .icon {
                  font-size: 13px;
                }
              }
              .title5 {
                width: 100%;
                padding: 0 15px;
                box-sizing: border-box;
                color: #333;
                font-size: 14px;
                margin-bottom: 23px;
              }
              .mid {
                height: 101px;
                border-top: 1px dashed #c7c7c7;
                position: relative;
                padding-top: 0;
                &::after {
                  content: "";
                  position: absolute;
                  width: 17px;
                  height: 17px;
                  background: rgba(0, 0, 0, 0.7);
                  top: -8.5px;
                  left: -8.5px;
                  border-radius: 50%;
                }
                &::before {
                  content: "";
                  position: absolute;
                  width: 17px;
                  height: 17px;
                  background: rgba(0, 0, 0, 0.7);
                  right: -8.5px;
                  top: -8.5px;
                  border-radius: 50%;
                }
                .code5 {
                  width: 65px;
                  height: 65px;
                  position: absolute;
                  bottom: 27px;
                  right: 16px;
                }
                .tip5 {
                  bottom: 11px;
                  right: 16px;
                  color: #999990;
                  position: absolute;
                  font-size: 8px;
                }
                .info {
                  width: 62%;
                  height: 56px;
                  box-sizing: border-box;
                  padding-top: 14px;
                  border-radius: 28px;
                  box-shadow: 0px 0px 4px 0px rgba(201, 201, 201, 0.5);
                  margin: 22px 0 0 13px;
                  position: relative;
                  font-size: 9px;
                  .nick {
                    color: #666666;
                  }
                  .desc {
                    color: #333333;
                  }
                  .mintext1 {
                    padding-left: 27% !important;
                  }
                  .img {
                    width: 35px;
                    height: 35px;
                    position: absolute;
                    top: 8px;
                    left: 8px;
                    padding-left: 0;
                    border-radius: 50%;
                  }
                }
              }
              .bottom5 {
                height: 37px;
                background: red;
              }
              .bottom5 .img {
                height: 37px;
                width: 100%;
                // background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.20/bottom5.png")
                // no-repeat;
                // background-size: 100% 100%;
              }
            }
            .box6 {
              background: #fff !important;
              height: 536px;
              overflow: auto !important;
              text-align: center;
              .headimg {
                width: 100%;
              }
              .bottom6 {
                height: 37px;
                width: 100%;
                .img {
                  height: 37px;
                  width: 100%;
                  display: block;
                }
              }
            }

            .zhanwei {
              height: 109px;
              width: 100%;
              .bottomImg {
                width: 100%;
                height: 109px;
                display: block;
              }
            }
            .code4 {
              width: 65px !important;
              height: 65px !important;
              position: absolute;
              bottom: 31px;
              left: 39%;
            }
            .tip4 {
              color: #fff;
              font-size: 8px;
              position: absolute;
              bottom: 15px;
              left: 39%;
            }
          }
        }
        .banner-scale {
          transform: scaleY(0.9) !important;
          transform-origin: center center !important;
          position: relative;
          opacity: 0.65;
        }
      }
    }
    .closebtn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin: 30px auto 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .equityPopup-show {
    opacity: 1;
    visibility: visible;
  }

  // 渐变背景
  .bgwrap {
    background: linear-gradient(
      180deg,
      rgba(255, 247, 241, 1) 0%,
      rgba(236, 236, 236, 0) 100%
    );
  }
}
</style>


